* {
  margin: 0;
  padding: 0;
}
html,body,.app {
  width: 100%;
  height: 100%;
}
ul {
  list-style: none;
}
/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: none;
}
/* 头部 */
.top {
  width: 96%;
  height: 6%;
  padding: 0 2%;
  position: fixed;
  top: 0;
  display: flex;
  justify-content: space-between;
  z-index: 1;
}
/* 头部-左侧 */
.top .p1 {
  width: 90%;
  height: 100%;
  color: #999;
  position: relative;
  display: flex;
  align-items: center;
}
/* 放大镜-字体图标 */
.top .p1 .icon-fangdajing {
  position: absolute;
  top: 30%;
  left: 3%;
}
/* 搜索框 */
.top .p1 input {
  width: 86%;
  height: 70%;
  /* border: none; */
  border-radius: 15px;
  border: 1px solid #ff4338;
  padding-left: 10%;
  font-size: 12px;
}
/* 搜索按钮 */
.top .p1 .search {
  position: absolute;
  top: 18%;
  right: 4%;
  padding: 1.5% 5% ;
  background: #ff4338;
  color: #fff;
  font-size: 12px;
  border-radius: 15px;
}

/* 头部-右侧 - 相机*/
.top .p2 {
  width: 10%;
  height: 100%;
  font-size: 12px;
  /* 页面滚动-相机需变的色 */
  color: #333;
  /* color: #fff; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 中间-主体【整个】 */
.main {
  width: 100%;
  height: 91.5%;  
  background: #ff4234;
  /* 定位 */
  position: fixed;
  top: 0;
  display: flex;
  flex-direction: column;
  /* 滚动 */
  overflow: auto;
}
/* 1-advertisement[广告-标题] */
.main .ad {
  width: 100%;
  height: 15%;
  display: flex;
  justify-content: center;
  align-items:flex-end;
  background: #ff4048;
  flex: 0 0 auto;
}
.main .ad img {
  width: 20%;
}
.main .ad h3 {
  color: #fff;
}
/* 2-广告内容ul */
.main .ad_con {
  width: 100%;
  height: 12%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-end;
  background: #ff4240;
  padding-bottom: 5%;
  flex: 0 0 auto;
}
.main .ad_con li {
  width: 30%;
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.main .ad_con li:nth-child(2) {
  border-left: 1px solid #ff8d8e;
  border-right: 1px solid #ff8d8e;
}
/* 广告内容-上 */
.main .ad_con .ad_p1 {
  width: 100%;
  height: 50%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #fff;
}
/* 广告内容-下 */
.main .ad_con .ad_p2 {
  width: 100%;
  height: 50%;
  font-size: 14px;
  color: #ffbbb4;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
/* 3-商品主体[白底]-横向滚动
  核心三要素：
  父元素设置 width: 100%，横向滚动 overflow-x: scroll
  父元素不换行 white-space: nowrap
  子元素设置为行内块级元素 display: inline-block
*/
.goods {
  width: 100%;
  height: 20%;
  background: rgb(255, 255, 255);
  padding: 3% 0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  flex: 0 0 auto;
}
.goods ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  /* 不换行 */
  white-space: nowrap;
  overflow: hidden;
  overflow-x: scroll;
}
.goods ul li {
  width: 20%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
}
.goods ul li p {
  width: 100%;
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.goods ul li p img {
  width: 50%;
}
.goods ul li p span {
  font-size: 12px;
  color: #333;
}

/* 4-广告图和广告列表 */
.main .ad_02 {
  width: 100%;
  height: 32%;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
}
.main .ad_02 img {
  width: 92%;
}
/* 广告列表ul */
.main .ad_02 .ad_list {
  width: 98%;
  height: 100%;
  padding: 0 1%;
  background-image: linear-gradient(#fff,#f4f4f4 95%);
  /* 弹性 */
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.main .ad_02 .ad_list li {
  width: 19%;
  height: 50%;
  background: #fff;
  border-radius: 5px;
  border: 1px solid #ebebeb;
  padding:1%;
  display: flex;
  flex-direction: row;
}
/* 左文 */
.main .ad_02 .ad_list li .list_p1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.main .ad_02 .ad_list li .list_p1 span:first-child {
  font-weight: 700;
  font-size: 13px;
}
.main .ad_02 .ad_list li .list_p1 span:last-child {
  font-size: 12px;
  color: #666;
}
/* 右图 */
.main .ad_02 .ad_list li .list_p2 {
  width: 20%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}
.main .ad_02 .ad_list li .list_p2 img {
  width: 130%;
}
/* 5-商品列表ul */ 
.main .good_list {
  width: 96%;
  padding: 0 2%;
  background: #f4f5f7;
  /* 整个窗口的高 */
  flex: 1;
  /* 多列显示 */
  columns: 2;
}
.main .good_list li {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  margin-bottom: 5%;
  /* 不折列 */
  break-inside: avoid;
}

/* 图片设置 */
.main .good_list img {
  width: 100%;
  border-radius: 10px;
}
/* 相对定位，为了选择器小圆点 */
.main .good_list .goods_buy {
  position: relative;
}
/* 选择器 */
.main .good_list .goods_buy .select {
  width: 40%;
  height: 4%;
  /* 绝对定位 */
  position: absolute;
  bottom: 3%;
  left: 30%;
  /* 弹性 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* background: skyblue; */
}
/* 选择器-选择项(小圆点) */
.main .good_list .goods_buy .select li {
  width: 8%;
  height: 50%;
  border-radius: 50%;
  background: #d4c2f6;
  border-bottom: 1px solid olivedrab;
}
/* 点击选择器，高亮显示 */
.main .good_list .goods_buy .select li:hover {
  background: #fff;
}
/* 列表-产品标题 */
.main .good_list .gp1{
  font-size: 12px;
  color: #333;
  line-height: 2;
  padding: 0 5%;
  /* 省略号 */
  /* white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; */


}
.main .good_list div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  line-height: 1.5;
  padding: 0 5%;
  text-decoration: line-through;
}
/* 列表-现价(￥符号) */
.main .good_list .gp2 .gs1{
  font-size: 12px;
  font-weight: 700;
}
/* 列表-现价 */
.main .good_list .gp2 .gs2{
  font-size: 14px;
  font-weight: 700;
}
/* 列表-原价-删除线 */
.main .good_list .gp2 span:nth-child(2) {
  text-decoration: line-through;
  font-size: 12px;
  color: #999;
}
/* 列表-热度 */
.main .good_list .gp3 {
  font-size: 12px;
  color: #999;
}
/* 收藏、浏览、售出 */
.main .good_list .gp4 {
  font-size: 12px;
  color: #c08b59;
  padding:2% 5% 8%;
}

/* 广告位-固定定位 */
.ad_fixed {
  width: 98%;
  height: 4%;
  padding: 0 1%;
  position: fixed;
  bottom: 9%;
  display: flex;
  align-items: center;
}
.ad_fixed img {
  width: 100%;
}
/* 底部 */
.bottom {
  width: 100%;
  height: 8%;
  background: #fff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 0 3px 0 rgba(0,0,0,.3);
  /* 固定定位 */
  position: fixed;
  bottom: 0;
}
.bottom ul {
  width: 90%;
  height: 100%;
  padding: 0 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bottom ul li {
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: #aeafb4;
}
/* 底部菜单-点击效果 */
.bottom ul li:hover {
  color: #ff2519;
}
/* 字体图标 */
.bottom .iconfont::before {
  font-size: 1.4rem;
}
/* 我的-小圆点定位处理 */
.bottom li:last-child {
  position: relative;
}

.bottom li .c_red{
  width: 8px;
  height: 8px;
  background: #ff4338;
  border-radius: 50%;
  position: absolute;
  right: 24%;
  top: 10%;
}